<template>
  <div class="micro-shop-box">
    <!--预览区-->
    <div class="previewStyle">
      <div class="view-main" v-show="formData.indicator == 1" :style="{marginTop:formData.marginTop/2 + 'px',marginBottom:formData.marginBottom/2 + 'px'}">
        <div class="view-main-img">
           <div class="mantle" v-show="formData.mantle"></div>
          <div v-show="formData.bg == '0'">
            <el-image v-if="formData.bgImage" :src="formData.bgImage" fit="fit" />
            <div  v-else class="image-ad-view"></div>
          </div>
          <div  v-show="formData.bg != '0'" :style="{backgroundColor:formData.bgColor,height: '100%'}"></div>
        </div>
        <div class="view-main-fix" v-show="formData.msg ==='0'">
          <el-badge is-dot class="item"> 
            <i class="el-icon-chat-dot-round"></i>
          </el-badge>
        </div>
        <div class="view-main-cont">
          <div class="cont-left">
             <el-image v-if="formData.imageLogo" :src="formData.imageLogo" fit="fit"  />
          </div>
          <div class="cont-right">
            <div class="cont-right-cont">
              <div :style="{color:formData.fontColor}">{{formData.name}}</div>
              <div :style="{color:formData.fontColor}">
                <span class="el-icon-location-outline" v-show="formData.navigation ==='0'"></span>
                <span class="cont-pos" v-show="formData.position ==='0'">{{formData.positionName}}</span>
                <span v-show="formData.isPhone ==='0'">{{formData.phone}}</span>
                <!-- <label>满减</label>
                <span :style="{color:formData.fontColor}">在线支付满150减30，满100减20</span> -->
              </div>
            </div>
            <div :style="{color:formData.fontColor}"> ></div>
            <div class="cont-follow" v-show="formData.follow ==='0'">关注</div>
          </div>
        </div>
      </div>
      <div class="view-main view-main1 view-main-two" v-show="formData.indicator == 2" :style="{marginTop:formData.marginTop/2 + 'px',marginBottom:formData.marginBottom/2 + 'px'}">
        <div class="view-main-img">
           <div class="mantle" v-show="formData.mantle"></div>
          <div v-show="formData.bg == '0'">
            <el-image v-if="formData.bgImage" :src="formData.bgImage" fit="fit"  />
            <div  v-else class="image-ad-view"></div>
          </div>
          <div  v-show="formData.bg != '0'" :style="{backgroundColor:formData.bgColor,height: '100%'}"></div>
        </div>
        <div class="view-main-fix" v-show="formData.msg ==='0'">
          <el-badge is-dot class="item"> 
            <i class="el-icon-chat-dot-round"></i>
          </el-badge>
        </div>
        <div class="view-main-cont">
          <div class="cont-left">
             <el-image v-if="formData.imageLogo" :src="formData.imageLogo" fit="fit"  />
          </div>
          <div class="cont-right">
            <div class="cont-right-cont">
              <div :style="{color:formData.fontColor}">{{formData.name}}</div>
              <div>
                <span class="el-icon-location-outline" v-show="formData.navigation ==='0'"></span>
                <span class="cont-pos" v-show="formData.position ==='0'">{{formData.positionName}}</span>
                <span v-show="formData.isPhone ==='0'">{{formData.phone}}</span>
                <!-- <span :style="{color:formData.fontColor}">全部商品999</span>
                <span :style="{color:formData.fontColor}">|</span>
                <span :style="{color:formData.fontColor}">上新30</span> -->
              </div>
            </div>
            <div class="cont-follow" v-show="formData.follow ==='0'">关注</div>
          </div>
        </div>
      </div>
      <!-- <div class="view-main view-main1 view-main-tree" v-show="formData.indicator == 3" :style="{marginTop:formData.marginTop/2 + 'px',marginBottom:formData.marginBottom/2 + 'px'}">
        <div class="view-main-img">
           <div class="mantle" v-show="formData.mantle"></div>
          <div v-show="formData.bg == '0'">
            <el-image v-if="formData.bgImage" :src="formData.bgImage" fit="fit"  />
            <div  v-else class="image-ad-view"></div>
          </div>
          <div  v-show="formData.bg != '0'" :style="{backgroundColor:formData.bgColor,height: '100%'}"></div>
        </div>
        <div class="view-main-fix" v-show="formData.msg ==='0'">
          <el-badge is-dot class="item"> 
            <i class="el-icon-chat-dot-round"></i>
          </el-badge>
        </div>
        <div class="view-main-cont">
          <div class="cont-left">
             <el-image v-if="formData.imageLogo" :src="formData.imageLogo" fit="fit"  />
          </div>
          <div class="cont-right">
            <div class="cont-right-cont">
              <div :style="{color:formData.fontColor}">{{formData.name}}</div>
              <div>
                 <span class="el-icon-location-outline" v-show="formData.navigation ==='0'"></span>
                <span class="cont-pos" v-show="formData.position ==='0'">b1</span>
                <span v-show="formData.isPhone ==='0'">{{formData.phone}}</span>
              </div>
            </div>
            <div class="cont-follow" v-show="formData.follow ==='0'">关注</div>
          </div>
        </div>
      </div> -->
      <div class="view-main view-main1 view-main-four" v-show="formData.indicator == 3" :style="{marginTop:formData.marginTop/2 + 'px',marginBottom:formData.marginBottom/2 + 'px'}">
        <div class="view-main-img">
           <div class="mantle" v-show="formData.mantle"></div>
          <div v-show="formData.bg == '0'">
            <el-image v-if="formData.bgImage" :src="formData.bgImage" fit="fit"  />
            <div  v-else class="image-ad-view"></div>
          </div>
          <div  v-show="formData.bg != '0'" :style="{backgroundColor:formData.bgColor,height: '100%'}"></div>
        </div>
        <div class="view-main-fix" v-show="formData.msg ==='0'">
          <el-badge is-dot class="item"> 
            <i class="el-icon-chat-dot-round"></i>
          </el-badge>
        </div>
        <div class="view-main-cont">
          <div class="cont-left">
             <el-image v-if="formData.imageLogo" :src="formData.imageLogo" fit="fit"  />
          </div>
          <div class="cont-right">
            <div class="cont-right-cont">
              <div :style="{color:formData.fontColor}">{{formData.name}}</div>
              <div :style="{color:formData.fontColor}">
                <span class="el-icon-location-outline" v-show="formData.navigation ==='0'"></span>
                <span class="cont-pos" v-show="formData.position ==='0'">{{formData.positionName}}</span>
                <span v-show="formData.isPhone ==='0'">{{formData.phone}}</span>
                  <div class="cont-follow" v-show="formData.follow ==='0'">关注</div>
                <!-- <span :style="{color:formData.fontColor}">全部商品999</span>
                <span :style="{color:formData.fontColor}">|</span>
                <span :style="{color:formData.fontColor}">上新30</span> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="view-main view-main1 view-main-four view-main-five" v-show="formData.indicator == 4" :style="{marginTop:formData.marginTop/2 + 'px',marginBottom:formData.marginBottom/2 + 'px'}">
        <div class="view-main-img">
           <div class="mantle" v-show="formData.mantle"></div>
          <div v-show="formData.bg == '0'">
            <el-image v-if="formData.bgImage" :src="formData.bgImage"  fit="fit" />
            <div  v-else class="image-ad-view"></div>
          </div>
          <div  v-show="formData.bg != '0'" :style="{backgroundColor:formData.bgColor,height: '100%'}"></div>
        </div>
        <div class="view-main-fix" v-show="formData.msg ==='0'">
          <el-badge is-dot class="item"> 
            <i class="el-icon-chat-dot-round"></i>
          </el-badge>
        </div>
        <div class="view-main-cont">
          <div class="cont-left">
             <el-image v-if="formData.imageLogo" :src="formData.imageLogo"  fit="fit" />
          </div>
          <div class="cont-right">
            <div class="cont-right-cont">
              <div class="border-t" :style="{color:formData.fontColor}">{{formData.name}}</div>
              <div :style="{color:formData.fontColor}">
                <span class="el-icon-location-outline" v-show="formData.navigation ==='0'"></span>
                <span class="cont-pos" v-show="formData.position ==='0'">{{formData.positionName}}</span>
                <span v-show="formData.isPhone ==='0'">{{formData.phone}}</span>
                <div class="cont-follow" v-show="formData.follow ==='0'">关注</div>
                <!-- <span :style="{color:formData.fontColor}">全部商品999</span>
                <span :style="{color:formData.fontColor}">|</span>
                <span :style="{color:formData.fontColor}">上新30</span> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--编辑区-->
    <div v-show="isShowEdit" class="design-editor-item design-hide-class">
      <el-scrollbar wrap-class="scroll-content">
        <div class="rightWrap">
          <div class="design-editor-component-title">店铺信息</div>
          <div class="tabRadioWrap">
            <el-radio-group v-model="formData.indicator" @change="indicatorChange">
              <el-tooltip
                v-for="(item, index) in tabList"
                :key="index"
                effect="dark"
                :content="item.title"
                placement="bottom"
              >
                <el-radio-button :label="index + 1">
                  <span :class="[item.icon]" />
                </el-radio-button>
              </el-tooltip>
            </el-radio-group>
          </div>
          <el-tabs
            v-model="settingActive"
            tab-position="top"
            style="margintop: 10px"
          >
            <el-tab-pane label="内容设置" name="0">
              <p>添加店铺</p>
              <div class="ad-image-list">
                <div class="ad-image-list-img ad-handle main-image-add" v-if="!this.formData.imageLogo"  @click="changeImg(1)">
                  <span>+</span>
                  <p class="re-choose-img">添加店铺</p>
                </div>
                <div class="cont-image cont-images" v-else>
                  <el-image :src="formData.imageLogo" :style="{width: '100%',height: '100%'}" ></el-image>
                  <div class="cont-images-name" @click="changeImg(1)">更换店铺</div>
                </div>
                <div class="ad-image-list-content">
                  <div>
                    <div class="ad-image-title">
                      <span>店铺名称：</span>
                      <el-input  v-model="formData.name"  size="mini" placeholder="输入标题" />
                    </div>
                    <div class="ad-image-title">
                      <span>店铺业态：</span>
                      <span>{{formData.formatIdName}}</span>
                      <!-- <el-input size="mini" placeholder="输入标题" /> -->
                    </div>
                    <!-- <div class="ad-image-title">
                      <span>logo链接：</span>
                      <span class="cursor modifyBtn" @click="choosePage(index)"
                        >请选择跳转到的页面</span
                      >
                    </div> -->
                  </div>
                </div>
              </div>
              <div class="styleWrap styleWrap-padding">
                <div class="shop-bg">
                  <div class="dis al_item w100e item_mar">
                    <div>店铺背景</div>
                    <el-radio-group v-model="formData.bg" class="radio-font">
                      <el-radio label="0">图片</el-radio>
                      <el-radio label="1">纯色</el-radio>
                    </el-radio-group>
                  </div>
                  <div class="shop-bg-cont" >
                    <div v-show="formData.bg == '0'">
                      <div  class="cont-image" @click="changeImg(2)" v-if="!this.formData.bgImage">
                        <span>+</span>
                        <p class="re-choose-img">添加图片</p>
                      </div>
                      <div class="cont-image cont-images" v-else>
                        <el-image :src="formData.bgImage" fit="cover"></el-image>
                        <div class="cont-images-name" @click="changeImg(2)">更换图片</div>
                      </div>
                    </div>
                   
                    
                    <div v-show="formData.bg != '0'"><el-color-picker v-model="formData.bgColor"></el-color-picker></div>
                  </div>
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>店铺位置</div>
                  <el-radio-group v-model="formData.position" size="small">
                    <el-radio-button label="0">显示</el-radio-button>
                    <el-radio-button label="1">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>店铺关注</div>
                  <el-radio-group v-model="formData.follow" size="small">
                    <el-radio-button label="0">显示</el-radio-button>
                    <el-radio-button label="1">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>位置导航</div>
                  <el-radio-group v-model="formData.navigation" size="small">
                    <el-radio-button label="0">显示</el-radio-button>
                    <el-radio-button label="1">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>客服电话</div>
                  <el-radio-group v-model="formData.isPhone" size="small">
                    <el-radio-button label="0">显示</el-radio-button>
                    <el-radio-button label="1">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>店铺消息</div>
                  <el-radio-group v-model="formData.msg" size="small">
                    <el-radio-button label="0">显示</el-radio-button>
                    <el-radio-button label="1">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="样式设置" name="1">
              <div class="styleWrap">
                <div class="titleStyle">内容样式</div>
                <div>
                  <div class="dis dis_ju_spb al_item w100e item_mar">
                    <div>文字颜色</div>
                    <el-radio-group v-model="formData.fontColor" size="small">
                      <el-radio-button label="#fff">白色</el-radio-button>
                      <el-radio-button label="#000">黑色</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="dis dis_ju_spb al_item w100e item_mar">
                    <div>背景蒙层</div>
                    <el-radio-group v-model="formData.mantle" size="small">
                      <el-radio-button :label="true">显示</el-radio-button>
                      <el-radio-button :label="false">隐藏</el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
              </div>
              <div class="styleWrap">
                <div class="titleStyle">组件样式</div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>上边距</span>
                    <span class="text_mar">{{ formData.marginTop }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginTop" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>下边距</span>
                    <span class="text_mar">{{ formData.marginBottom }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginBottom" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-scrollbar>
    </div>

    <chooseImages ref="pics" :can-choose-images-num="canChooseImagesNum" :max="canChooseImagesNum" @chooseImagesEnd="chooseImagesEnd" @getUrl="getPicsUrl" />
    <chooseSh ref="chooseShs" @chooseShEnd="chooseShEnd"/>
    <!--选择微页面-->
    <div id="dialog">
      <el-dialog
        custom-class="up-dialog"
        :close-on-click-modal="false"
        top="5vh"
        :visible.sync="dialogChoosePages"
        width="42%"
      >
        <div class="choose-goods-compent">
          <choose-feature
            :is-get-choose-data="isGetChooseFeature"
            @chooseChooseFeaturesFun="chooseChooseFeaturesFun"
          />
          <div slot="footer" style="text-align: right; margin-top: 20px">
            <el-button
              size="mini"
              type="primary"
              @click="isGetChooseFeature = !isGetChooseFeature"
              >确定</el-button
            >
            <el-button size="mini" @click="dialogChoosePages = false"
              >取消</el-button
            >
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import index from "./index.js";

export default index;
</script>
